<template>
  <div class="main-container" id="main-container">
    <div style="background-color: #fff; height: 100%" id="ProductMasterData">
      <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
        <a-tab-pane title="疵点类型" key="1">
          <div style="height: 100%">
            <DefectType></DefectType>
          </div>
        </a-tab-pane>
        <a-tab-pane title="验布疵点信息" key="2">
          <div style="height: 100%">
            <FabricInspectionDefect v-if="pageData.fectToday2"></FabricInspectionDefect>
          </div>
        </a-tab-pane>
        <a-tab-pane title="验布长度单位维护" key="3">
          <div style="height: 100%">
            <ClothInspectionLength v-if="pageData.fectToday3"></ClothInspectionLength>
          </div>
        </a-tab-pane>
        <a-tab-pane title="验布等级" key="4">
          <div style="height: 100%">
            <ClothInspectionGradedj v-if="pageData.fectToday4"></ClothInspectionGradedj>
          </div>
        </a-tab-pane>
        <a-tab-pane title="验布类型" key="5">
          <div style="height: 100%">
            <ClothInspectionType v-if="pageData.fectToday5"></ClothInspectionType>
          </div>
        </a-tab-pane>
        <a-tab-pane title="回修返工" key="6">
          <div style="height: 100%">
            <RepairAndRework v-if="pageData.fectToday6"></RepairAndRework>
          </div>
        </a-tab-pane>
        <a-tab-pane title="回修类型" key="7">
          <div style="height: 100%">
            <RepairType v-if="pageData.fectToday7"></RepairType>
          </div>
        </a-tab-pane>
        <a-tab-pane title="抽检类型" key="8">
          <div style="height: 100%">
            <SamplingType v-if="pageData.fectToday8"></SamplingType>
          </div>
        </a-tab-pane>
        <a-tab-pane title="手感维护" key="9">
          <div style="height: 100%">
            <HandFeelMaintenance v-if="pageData.fectToday9"></HandFeelMaintenance>
          </div>
        </a-tab-pane>
        <a-tab-pane title="质检等级" key="10">
          <div style="height: 100%">
            <QualityInspectionGrade v-if="pageData.fectToday10"></QualityInspectionGrade>
          </div>
        </a-tab-pane>
        <a-tab-pane title="色级" key="11">
          <div style="height: 100%">
            <ColorLevel v-if="pageData.fectToday11"></ColorLevel>
          </div>
        </a-tab-pane>
        <a-tab-pane title="毛效维护" key="12">
          <div style="height: 100%">
            <GrossMaintenance v-if="pageData.fectToday12"></GrossMaintenance>
          </div>
        </a-tab-pane>
        <a-tab-pane title="中边维护" key="13">
          <div style="height: 100%">
            <MiddleMaintenance v-if="pageData.fectToday13"></MiddleMaintenance>
          </div>
        </a-tab-pane>
        <a-tab-pane title="弹性维护" key="14">
          <div style="height: 100%">
            <FlexibleMaintenance v-if="pageData.fectToday14"></FlexibleMaintenance>
          </div>
        </a-tab-pane>
        <a-tab-pane title="疋差维护" key="15">
          <div style="height: 100%">
            <MatchMaintenance v-if="pageData.fectToday15"></MatchMaintenance>
          </div>
        </a-tab-pane>
        <a-tab-pane title="纸管类型" key="16">
          <div style="height: 100%">
            <PaperTubeType v-if="pageData.fectToday16"></PaperTubeType>
          </div>
        </a-tab-pane>
        <a-tab-pane title="物测标准维护" key="17">
          <div style="height: 100%">
            <PhysicalMaintenance v-if="pageData.fectToday17"></PhysicalMaintenance>
          </div>
        </a-tab-pane>
        <a-tab-pane title="面料测试项目" key="18">
          <div style="height: 100%">
            <FabricTestItems v-if="pageData.fectToday18"></FabricTestItems>
          </div>
        </a-tab-pane>
        <a-tab-pane title="测试项目维护" key="19">
          <div style="height: 100%">
            <TestItemMaintenance v-if="pageData.fectToday19"></TestItemMaintenance>
          </div>
        </a-tab-pane>
        <a-tab-pane title="客户测试项目" key="20">
          <div style="height: 100%">
            <CustomerTestItems v-if="pageData.fectToday20"></CustomerTestItems>
          </div>
        </a-tab-pane>
        <a-tab-pane title="测试结果维护" key="21">
          <div style="height: 100%">
            <TestResults v-if="pageData.fectToday21"></TestResults>
          </div>
        </a-tab-pane>
        <a-tab-pane title="推送类别" key="22">
          <div style="height: 100%">
            <PushCategory v-if="pageData.fectToday22"></PushCategory>
          </div>
        </a-tab-pane>
        <a-tab-pane title="试纱检查项目设定" key="23">
          <div style="height: 100%">
            <YarnTestingInspection v-if="pageData.fectToday23"></YarnTestingInspection>
          </div>
        </a-tab-pane>
        <a-tab-pane title="查布登记" key="26">
          <div style="height: 100%">
            <CheckForFabricDefects v-if="pageData.fectToday26"></CheckForFabricDefects>
          </div>
        </a-tab-pane>
        <a-tab-pane title="异常备注" key="24">
          <div style="height: 100%">
            <ExceptionalRemarks v-if="pageData.fectToday24"></ExceptionalRemarks>
          </div>
        </a-tab-pane>
        <a-tab-pane title="验布效果" key="25">
          <div style="height: 100%">
            <ClothInspectionEffect v-if="pageData.fectToday25"></ClothInspectionEffect>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue'

  import emitter from '@/hooks/useEventBus'
  export default defineComponent({
    name: 'QMSMasterData',
    setup() {
      const pageData = reactive({
        tableIndex: '1',
        fectToday2: false,
        fectToday3: false,
        fectToday4: false,
        fectToday5: false,
        fectToday6: false,
        fectToday7: false,
        fectToday8: false,
        fectToday9: false,
        fectToday10: false,
        fectToday11: false,
        fectToday12: false,
        fectToday13: false,
        fectToday14: false,
        fectToday15: false,
        fectToday16: false,
        fectToday17: false,
        fectToday18: false,
        fectToday19: false,
        fectToday20: false,
        fectToday21: false,
        fectToday22: false,
        fectToday23: false,
        fectToday24: false,
        fectToday25: false,
        fectToday26: false,
      })

      const tabsChange = (e: string | number) => {
        pageData.tableIndex = e as string
        let name = 'fectToday' + e
        if (e != '1') {
          pageData[name] = true
        }
      }
      return {
        pageData,
        tabsChange,
      }
    },
  })
</script>
<style scoped>
  .main-container {
    height: 100%;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
